<template>
    <ManageCard ref="manageCard" @fulsh="getBodyData" @click-of-add-btn="dialogOfSaveInTableCard.open()"
        :numberOfEntries="bodyData.length">
        <el-table cell-class-name="cell-class" max-height="calc(100vh - 255px)" :data="bodyData" style="width: 100%;">
            <!-- 序号 -->
            <el-table-column type="index" width="60px"></el-table-column>
            <el-table-column prop="groupCode" v-if="groupCodeSelected == null || groupCodeSelected == ''" label="分组编码">
                <template #header>
                    <div class="title">{{ pageDict.groupCode }}</div>

                    <el-select v-model="requestParam.and.eq[0].groupCode" placeholder="请选择" @change="getBodyData">
                        <el-option :key="null" :label="store.appFront.all" :value="null">
                        </el-option>
                        <el-option v-for="item in groupList" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </template>
                <template #default="scope">
                    <div v-if="scope.row.groupCode == null" type="info">{{ store.appFront.noData }}</div>
                    <div v-else type="info">{{
                        groupMap.get(scope.row.groupCode) }}</div>
                </template>

            </el-table-column>
            <el-table-column prop="code" label="编码">
                <template #header>
                    <div class="title">Code</div>
                    <el-input v-model="requestParam.and.vague[0].code" @keyup.enter="getBodyData"
                        :placeholder="store.appFront.search" />
                </template>
            </el-table-column>
            <el-table-column prop="value" label="值">
                <template #header>
                    <div class="title">{{ pageDict.value }}</div>
                    <el-input v-model="requestParam.and.vague[0].value" @keyup.enter="getBodyData"
                        :placeholder="store.appFront.search" />
                </template>
            </el-table-column>

            <el-table-column prop="name" label="名称">
                <template #header>
                    <div class="title">{{ pageDict.name }}</div>
                    <el-input v-model="requestParam.and.vague[0].name" @keyup.enter="getBodyData"
                        :placeholder="store.appFront.search" />
                </template>
            </el-table-column>
            <!-- 操作，固定位置 -->
            <el-table-column fixed="right" :width="'125px'">
                <template #default="scope">
                    <el-button type="text" ref="editButton" size="small" @click="dialogOfSaveInTableCard.open(scope.row)">
                        <el-icon :size="15">
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm width="200px" :title="store.appFront.deletePrompt"
                        :confirm-button-text="store.appFront.confirm" :cancel-button-text="store.appFront.cancel"
                        @confirm="toDelete(scope.row)">
                        <template #reference>
                            <el-button type="text" ref="deleteButton" style="color: #f56c6c" size="small">
                                <el-icon :size="15">
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
    </ManageCard>
    <DialogOfSaveInTableCard @flush="getBodyData()" ref="dialogOfSaveInTableCard" />
</template>

<script lang="ts" setup>
import DialogOfSaveInTableCard from './DialogOfSaveInTableCard.vue';
import { ref, defineExpose } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from '@/stores/counter';
import ManageCard from '@/views/manage/components/ManageCard.vue';

let dialogOfSaveInTableCard = ref();


let store = useStore();

let requestParam = ref({
    and: {
        eq: [{
            groupCode: null // 分组编码
        }],
        vague: [
            {
                "code": "", // 编码
                "name": "", // 名称
                "value": "", // 值
                "description": "", // 描述
            }
        ]
    },
    entity: {}
});

let bodyData = ref([{
    "id": 0,
    "code": "",
    "groupCode": "",
    "name": "",
    "description": "",
}]);

let groupCodeSelected = ref('');

let toGroupCode = (code: any) => {
    requestParam.value.and.eq[0].groupCode = code;
    groupCodeSelected.value = code;
    getBodyData();
};

let toDelete = (item: any) => {
    $kt.request.request({
        url: '/adminManage/system/setting/delete',
        method: 'post',
        data: item,
    }).then((res: any) => {
        getBodyData();
    });
};

let groupList = ref([
    {
        "code": "",
        "name": "",
        "description": "",
    }
]);

let groupMap = ref(new Map());


let getGroup = () => {
    $kt.request.request({
        url: '/adminManage/system/settingGroup/getList',
        method: 'post',
        data: { entity: {} },
    }).then((res: any) => {
        groupList = res.data.data;
        createGroupMap(res.data.data);
    });
}

let createGroupMap = (groupListJson: any) => {
    for (var i = 0; i < groupListJson.length; i++) {
        var item = groupListJson[i];
        groupMap.value.set(item.code, item.name);
    }
};


getGroup();

let getBodyData = () => {
    $kt.request.request({
        url: '/adminManage/system/setting/getList',
        method: 'post',
        data: requestParam.value,
    }).then((res: any) => {
        bodyData.value = res.data.data;
    });
};

let pageDict = ref({
    "groupCode": "分组编码",
    "code": "编码",
    "name": "名称",
    "value": "值",
    "description": "描述",
});

const getPageDict = async (code: string) => {
    return await $kt.request.request({
        url: "/system/page/getDictMap",
        method: "post",
        data: { code }
    });
}

getPageDict("adminManageSettingManage").then((res: any) => {
    pageDict.value = res.data.data;
});
getBodyData();

store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getBodyData();
        getGroup();
        getPageDict("adminManageSettingManage").then((res: any) => {
            pageDict.value = res.data.data;
        });
    }
});


defineExpose({
    toGroupCode
});
</script>


<style lang="scss" scoped>
.card {
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.title {
    color: #666666;
    text-align: center;
}

.cell-class {
    cursor: pointer;
}

.refresh:active {
    transform: rotate(45deg);
}
</style>